<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="/favicon.ico" >
<LINK rel="Shortcut Icon" href="/favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" src="../../lib/html5.js"></script>
<script type="text/javascript" src="../../lib/respond.min.js"></script>
<script type="text/javascript" src="../../lib/PIE_IE678.js"></script>
<![endif]-->
<link href="../../css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="../../css/H-ui.analysis.css" rel="stylesheet" type="text/css" />
<link href="../../lib/Hui-iconfont/1.0.7/iconfont.css" rel="stylesheet" type="text/css" />
<link href="../../lib/icheck/icheck.css" rel="stylesheet" type="text/css" />

<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>用户访问概况</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 统计管理 <span class="c-gray en">&gt;</span> 访问概况 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="cl pd-20">
   <div class="row-demo" id="aceess-info">
   </div>
   <div class="row cl mt-10" id="view-days">
   		<input class="btn btn-primary radius" type="button" value="今天" name="0">
   		<input class="btn btn-primary radius" type="button" value="昨天" name="1">
   		<input class="btn btn-primary radius" type="button" value="最近7天" name="7">
   		<input class="btn btn-primary radius" type="button" value="最近30天" name="30">
   </div>
   <div class="row cl panel panel-warning mt-10">
		<div class="panel-body">
			<div id="view-points">
				<div class="radio-box">
				    <input type="radio" id="radio-pv" value="pv" name="view-radio"  checked>
				    <label for="radio-pv">浏览量（PV）</label>
				 </div>
				<div class="radio-box">
				    <input type="radio" id="radio-uv" value="uv" name="view-radio">
				    <label for="radio-pv">用户量（UV）</label>
				 </div>
				<div class="radio-box">
				    <input type="radio" id="radio-ip" value="ip" name="view-radio">
				    <label for="radio-pv">IP数</label>
				 </div>
			</div>
			<div id="aceess-chart"></div>
		</div>
	</div>
	<div class="row cl mt-10">
		<div class="col-xs-12 col-sm-6"  id="page-referer">
		</div>
		<div class="col-xs-12 col-sm-6" id="page-visited">
		</div>
		
	</div>
</div>
<script type="text/javascript" src="../../lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="../../lib/template.js"></script>
<script type="text/javascript" src="../../lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="../../lib/echarts/echarts.common.min.js"></script>
<script type="text/javascript" src="../../lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="../../js/H-ui.js"></script>
<script type="text/javascript" src="../../res/analysis/js/v.js"></script>
<!-- template -->
<script id="aceess-info-template"  type="text/html">
<div class="row cl" >
			<div class="col-xs-12 col-sm-2">
				<div class="panel-sum">
					<h2>{{thisPv}}</h2>
					<p>今日浏览量(PV)</p>
				</div>
			</div>
			<div class="col-xs-12 col-sm-2">
				<div class="panel-sum">
					<h2>{{lastPv}}</h2>
				    <p>昨日浏览量(PV)</p>
				</div>
			</div>
			<div class="col-xs-12 col-sm-2">
				<div class="panel-sum">
					<h2>{{thisUv}}</h2>
					<p>今日用户量(UV)</p>
				</div>
			</div>
			<div class="col-xs-12 col-sm-2">
				<div class="panel-sum">
					<h2>{{lastUv}}</h2>
					<p>昨日用户量(UV)</p>
				</div>
			</div>
			<div class="col-xs-12 col-sm-2">
				<div class="panel-sum">
					<h2>{{thisIp}}</h2>
					<p>今日IP数</p>
				</div>
			</div>
			<div class="col-xs-12 col-sm-2">
				<div class="panel-sum">
					<h2>{{lastIp}}</h2>
					<p>昨日IP数</p>
				</div>
			</div>
	</div>
</script>

<script id="page-referer-template"  type="text/html">
	<div class="panel panel-warning ml-5">
			    <div class="panel-header">
			    	受访页面
			    </div>
				<div class="panel-body">
					<table class="table table-border table-bg table-striped">
					  <thead>
					    <tr><th width="75%">入口页面</th><th width="15%">浏览量(PV)</th><th >占比</th></tr>
					  </thead>
					  <tbody>
						{{each items as a}}  
					    <tr><th>{{a.page}}</th><td>{{a.pv}}</td><td>{{a.prop}}%</td></tr>
                   		 {{/each}} 
					  </tbody>
					</table>
				</div>
			</div>
</script>
<script id="page-visited-template"  type="text/html">
	<div class="panel panel-warning ml-5">
			    <div class="panel-header">
			    	受访页面
			    </div>
				<div class="panel-body">
					<table class="table table-border table-bg table-striped">
					  <thead>
					    <tr><th width="75%">访问页面</th><th width="15%">浏览量(PV)</th><th >占比</th></tr>
					  </thead>
					  <tbody>
						{{each items as a}}  
					    <tr><th>{{a.page}}</th><td>{{a.pv}}</td><td>{{a.prop}}%</td></tr>
                   		 {{/each}} 
					  </tbody>
					</table>
				</div>
			</div>
</script>

<script>
    $(function() {
    	
    	var sysCode = '${sysCode}';
    	var day = '${day}' ;
    	var url = "/ws/rest/accesshour";
    	var x = "hours";
    	var p = "pv";
    	
    	$('#view-points input').iCheck({
    		checkboxClass: 'icheckbox-blue',
    		radioClass: 'iradio-blue',
    		increaseArea: '20%'
    	});
    	$('#view-points input').click(function(){
    		p = this.value;
    		loadChart(url,x,p,day);
    	});
    	
    	function getDay(days){
    		var dd = new Date();
    		dd.setDate(dd.getDate()+days);
    		var month = dd.getMonth()+1;
    		month = month < 10 ? '0'+month:month;
    		return dd.getFullYear()+'-'+month+'-'+dd.getDate();
    	}
    	
    	$('#view-days input').click(function(){
    		var d = Number(this.name);
    		if(d < 2){
    			day = getDay(-d);
    	        url = "/ws/rest/accesshour";
    	    	x = "hours";
    		}else{
    			day = d;
    			url = "/ws/rest/accessdays/dc";
    	    	x = "days";
    		}
    		loadChart(url,x,p,day);
    	});
    	
        $.ajax({
            type: 'get',
            url: '/ws/rest/accessday',
            data:{
            	sysCode : sysCode,
            	day : day
            },
            dataType: 'json',
            success: function(data) {
            	var html = template('aceess-info-template', data);
            	$('#aceess-info').html(html);
            }
        });
        
        //加载chart图表数据
        function loadChart(url,x,type,days){
	        $("#aceess-chart").accessChart("refresh",{
	        	name: type,
				url: url,
				params: {
					sysCode : sysCode,
	            	day : days
				},
				parseData: function(data) {
					var r = {
						"xAxis" : [],
						"datas" : []
					};
					for(var i in data){
						r.xAxis[i] = data[i][x];
						r.datas[i] = data[i][type];
					}
					return r;
				}
			});
        }
        
        
        
        function loadPagesAccess(){
	        $.ajax({
	            type: 'get',
	            url: '/ws/rest/accesspage/referer',
	            data:{
	            	sysCode : sysCode,
	            	day : day
	            },
	            dataType: 'json',
	            success: function(data) {
	            	var html = template('page-referer-template', {items:data});
	            	console.log(html);
	            	$('#page-referer').html(html);
	            }
	        });
	        $.ajax({
	            type: 'get',
	            url: '/ws/rest/accesspage/visited',
	            data:{
	            	sysCode : sysCode,
	            	day : day
	            },
	            dataType: 'json',
	            success: function(data) {
	            	var html = template('page-visited-template', {items:data});
	            	console.log(html);
	            	$('#page-visited').html(html);
	            }
	        });
        }
        
        loadChart(url,x,'pv',day);
        loadPagesAccess();
        
        
    });
</script>
</body>
</html>